iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
0
Modern Web

菜鳥網頁基礎系列 第 5

菜鳥網頁基礎 DAY5

  • 分享至 

  • xImage
  •  

三種語言介紹完後,就可以上工囉~
首先想要能做出一個網頁就必須要有一個能打程式碼的環境,那我選擇用的就是我之前介紹的 Visual Studio Code,接下來我們就叫他 VS code。

在開始前必須要先建置好一個資料,這個資料夾是要放跟網頁有相關的東西,網站他就像是一個資料夾,網站裡面有多個檔案,如果沒有把他整理在一起的話會非常麻煩,在開發時,如果檔案都分別在不同的地方,沒有整理在一起的話會很難檢查,還有一個原因是因為我們要把他公開,然後上傳到伺服器時,也要把他統整在一起,所以不管怎樣都是要把它整理成一個資料夾,重點是!!看了也比較舒服吧XD。

1.在桌面上新建資料夾
https://ithelp.ithome.com.tw/upload/images/20200912/20129535DYHFry7WsH.png
2.打開 VS Code 或是把資料夾往它裡面拖
https://ithelp.ithome.com.tw/upload/images/20200912/20129535zVGCGdfITQ.png
3.他就會打開了
https://ithelp.ithome.com.tw/upload/images/20200912/20129535D3P3Beh3Xp.png
也可以先打開 VS Code 然後點開啟資料夾選擇你放網頁的資料夾
https://ithelp.ithome.com.tw/upload/images/20200912/201295351aSbpYOSlM.png
https://ithelp.ithome.com.tw/upload/images/20200912/20129535JVg1NdtsPV.png
https://ithelp.ithome.com.tw/upload/images/20200912/20129535KmQ24HBXzY.png
之後都會呈現這個畫面
https://ithelp.ithome.com.tw/upload/images/20200912/201295354mmScrWpME.png
接下來就新建檔案
https://ithelp.ithome.com.tw/upload/images/20200912/20129535Y39VBqkzMm.png
我們檔名盡量都使用英文取名,我們後面一定要加 .html 這樣才能建好,建好後點開會是空白的,這時候在第一行打 !(驚嘆號)然後按 TAB 或是 ENTER 就會出現程式碼
https://ithelp.ithome.com.tw/upload/images/20200912/201295350Xg0z2FeMi.png
https://ithelp.ithome.com.tw/upload/images/20200912/20129535Y49xq7iAas.png
打!(驚嘆號)然後按 TAB 或是 ENTER 就會出現程式碼
https://ithelp.ithome.com.tw/upload/images/20200912/20129535L3US95ZTtD.png

這樣就完成了~就可以編輯網頁了


上一篇
菜鳥網頁基礎 DAY4
下一篇
菜鳥網頁基礎 DAY6
系列文
菜鳥網頁基礎30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言